<template>
  <div>
    <section>
      <el-button type="primary" class="el-icon-plus" @click="addbotfun()"
        >增加</el-button
      >
    </section>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品分类" prop="redirectName">
        
          <el-cascader :props="props"></el-cascader>
      
        </el-form-item>
        <el-form-item label="商品名" prop="goodsName">
          <el-input v-model="ruleForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品简介" prop="goodsIntro">
          <el-input v-model="ruleForm.goodsIntro"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品售卖价" prop="sellingPrice">
          <el-input v-model="ruleForm.sellingPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="originalPrice">
          <el-input v-model="ruleForm.originalPrice" 
          controls-position="right"
            :min="1" :max="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品标签" prop="name">
          <template>
            <el-radio v-model="radio" label="1">上架</el-radio>
            <el-radio v-model="radio" label="2">下架</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="商品主图" prop="name">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        <editor-vue
          :content="content"
          :readOnlys="readOnlys"
          @changeData="hChangeData"
          @uploadImg="hUploadImg"/>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width:100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="goodsId" label="商品编号"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名"> </el-table-column>
      <el-table-column prop="goodsIntro" label="商品简介"> </el-table-column>
      <el-table-column prop="goodsCoverImg" label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.goodsCarousel" alt="图片" width="50px" />
          <!-- <img :src="" alt=""> -->
        </template>
      </el-table-column>
      <el-table-column prop="originalPrice" label="商品库存"> </el-table-column>
      <el-table-column prop="sellingPrice" label="商品售价"> </el-table-column>
      <el-table-column prop="name" label="上架状态">
        <template>
 <section :text="text" :style="{'color':color}">{{text}}</section>
    </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
         

            <el-button type="warning"
             size="small"
              @click="handledele(scope.$index, scope.row)">删除</el-button>
         

          <!-- <el-button type="warning" size="small" @click="handledele(scope.$index, scope.row)">删除</el-button -->
        </template>
      </el-table-column>
    </el-table>
    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
import editorVue from "../../components/Editor.vue";
export default {
  components: {
    editorVue,
  },
  data() {
    return {
      num: 1,
      radio: "",
      dialogFormVisible: true,
      text:"销售中",
      title: "下架",
      color:"green",
      tableData: [],
      multipleSelection: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      readOnlys: false,
      content: "",
      ruleForm: {
        redirectName: "",
        name: "",

        goodsCategoryId: "",
        goodsCoverImg: "",
        goodsDetailContent: "",
        goodsIntro: "",
        goodsName: "",
        goodsSellStatus: "",
        originalPrice: "",
        sellingPrice: "",
        stockNum: "库存",
        tag: "",

        imgUrl:"",
      },
      level:1,
      parentId:0,
      props: {
          lazy: true,
          lazyLoad :(node, resolve)=>{
            if(node.level==0){//一级分类
              // this.level++
              // this.getfun(1)
            }
          }
           
            
             
           
          
        }    
    };
  },
  mounted() {
    this.getfun(1);
    console.log(this.radio);
  
  },
 
  methods: {
    handleCurrentChange(val) {
      this.getfun(val);
    },
    handledele(index,row){
      console.log(row);
    },
    xiajia(){//下架按钮
      
      if(this.title=="上架"){
        this.title="下架"
        this.text="销售中"
        this.color="green"
      }
      else if(this.title=="下架"){
        this.title="上架"
        this.text="已下架"
        this.color=" red"
       
      }
        
      },
    
    submitForm(formName) {//创建按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "增加") {
          
            console.log("增加");
          } else {
         
            console.log("修改");
           
          }
        } else {
          return false;
        }
      });
    },
   
    addbotfun() {
      //点击增加
      this.get(1)
      this.title = "增加";
      this.dialogFormVisible = true;
    },
    async addlp() {
      //增加
      let result = await this.$http.post("/goods", {
        goodsCategoryId: 0,
        goodsCoverImg: "string",
        goodsDetailContent: "string",
        goodsIntro:this.ruleForm.goodsIntro,
        goodsName: this.ruleForm.goodsName,
        goodsSellStatus: "string",
        originalPrice:this.ruleForm.originalPrice,
        sellingPrice: 0,
        stockNum: 0,
        tag: "string",
      });
      // this.dialogFormVisible = false
      // this.getfun(1);
    },
    async getfun(page) {
      //获取分页
      let result = await this.$http.get("/goods/list", {
        params: {
          pageNumber: page,
          pageSize: 10,
          goodsName: this.categoryLevel,
          parentId: this.parentId,
        },
      });
      

      // /admin/dist/img/no-img.png"
      // this.totalCount = result.data.totalCount;
      this.tableData = result.data.list;
      console.log(this.tableData);
      // this.imgurl=result.data.list.carouselUrl
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    hChangeData(editDataHtml) {
      //富文本编辑
      // 获取最新的html数据
      this.content = editDataHtml;
      console.log(this.content);
    },
    hUploadImg(file, insertFn) {
      console.log(file);
      // 插入图片，调接口返回图片url,通过插入conteng
      let imgUrl =
        "https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800";
      insertFn(imgUrl);

      // 设置只读
      // this.readOnlys = true;
    },
    async get(page) {
      //获取分页
      let result = await this.$http.get("/categories", {
        params: {
          pageNumber: page,
          pageSize: 1000,
          categoryLevel:this.level,
          parentId:this.parentId
        },
        
      });
      // 
      // this.options.parId=result.data.list.categoryId

      console.log(result);
      
    
      // this.value=result.data.list
      // console.log(result.data.list);

      // /admin/dist/img/no-img.png"
      // this.totalCount = result.data.totalCount;
      // this.tableData = result.data.list;
      // console.log(this.tableData);
      // this.imgurl=result.data.list.carouselUrl
    },
    handleChange(value) {
        console.log(value);
      }

  },
};
</script>

<style lang="less" scoped>
.jz{
  text-align: center;
}
</style>
